<extend name='Public/demo' />

<block name='contents'>

        <span class="label label-inverse">当前文件 : {$url}</span>
        <pre style="min-height:500px;" id="ace-editor" data-theme="{$url}" data-url="">{$res}</pre>
        <label class="save-status"></label>
        <button id="f-save-btn" class="btn btn-default" style="background:#333">保存修改</button>
        <a href="{:U('Theme/index')}" class="btn btn-default">返回菜单</a>
        <script type="text/javascript" src="__PUBLIC__/aceEditor/ace.js"></script>
        <script type="text/javascript" src="__PUBLIC__/aceEditor/r.js"></script>
        <script type="text/javascript" src="__PUBLIC__/aceEditor/ext-modelist.js"></script>
        <script type="text/javascript" src="__PUBLIC__/ext-language_tools.js"></script>
        <script>
            var editor = ace.edit("ace-editor");
            editor.setTheme("ace/theme/monokai");
            editor.setShowPrintMargin(false);
            editor.getSession().setUseWrapMode(true);
            editor.setFontSize(15);
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true
            });
            (function () {
                    var modelist = ace.require("ace/ext/modelist");
                    var filePath = "{$url}";
                    var mode = modelist.getModeForPath(filePath).mode;
                    // console.log(filePath);
                    editor.session.setMode(mode);
            }());


                $('#f-save-btn', parent.document.body).on('click', function() {
                    // var url     = $('#ace-editor').data('url');
                    var theme   = $('#ace-editor').data('theme');
                    var content = editor.getValue();

                    var load = "<img src='__PUBLIC__/Resource/loading.gif'>";

                    $('.save-status', parent.document.body).html(load).show();

                    $.post("{:U('Theme/editdo')}", { theme: theme, content: content }, function(data) {
                        if (data == 'yes') {
                            $('.save-status', parent.document.body).addClass('save-success').html('保存成功');
                        } else {
                            $('.save-status', parent.document.body).addClass('save-error').html('保存失败');
                        }
                        $('.save-status', parent.document.body).fadeOut(1600, function() {
                            $(this).empty();
                        });
                     });
                });

        </script>
</block>
